<template>
  <div class="folder-explorer" :class="{ error }">
    <div class="toolbar">
      <ActionButton @click="resetCwd" icon="management-home" :size="20" />
      <div v-if="editingPath" class="path-edit">
        <Input
          ref="pathInput"
          class="path-input"
          v-model="editedPath"
          placeholder="路径"
          style="width: 300px"
          @on-keyup.esc="editingPath = false"
          @on-keyup.enter="submitPathEdit()"
        />
      </div>
      <div v-else class="path-edit">
        <template v-for="(folder,index) in folderCurrent.folders">
          <ActionButton
            :key="index"
            @click="openFolder(folder.path)"
            :content="folder.name"
          />
        </template>
        <div style="flex:1;" />
        <ActionButton @click="openPathEdit" icon="management-edit" :size="20" />
      </div>
      <ActionButton
        @click="refreshFolder"
        icon="management-refresh"
        :size="20"
      />
    </div>
    <div ref="folders" class="folders">
      <template v-for="(folder,index) in foldersFavorite">
        <item
          :folder="folder"
          :key="folder.name"
          @select="openFolder(folder.path)"
        />
      </template>
    </div>
    <Button
      @click="createNewProject"
      style="margin:8px 0"
      size="large"
      type="primary"
    >在此创建新项目</Button>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import Item from "./Item";
export default {
  components: {
    Item,
  },
  data() {
    return {
      loading: 0,
      error: false,
      editingPath: false,
      editedPath: "",
      // folderCurrent: {},
      foldersFavorite: [],
    };
  },
  computed: {
    folderCurrent() {
      const path = this.editedPath;
      const folders = path.split("/").filter((p) => !!p);
      return {
        path,
        folders: folders.map((p, i) => {
          return {
            name: p,
            path: "/" + folders.filter((a, b) => b <= i).join("/"),
          };
        }),
      };
    },
  },
  methods: {
    ...mapActions(["readdir", "userhome"]),

    openFolder(path) {
      this.editingPath = false;
      this.error = null;
      this.loading++;
      this.readdir({ source: path })
        .then((res) => {
          this.editedPath = path;
          this.foldersFavorite = [...res.data];
        })
        .catch((error) => {})
        .finally(() => {
          this.loading--;
        });
    },

    async openPathEdit() {
      this.editedPath = this.folderCurrent.path;
      this.editingPath = true;
      await this.$nextTick();
      this.$refs.pathInput.focus();
    },

    resetCwd() {
      this.userhome().then((res) => {
        this.editedPath = res.data;
        this.openFolder(this.editedPath);
      });
    },

    submitPathEdit() {
      this.openFolder(this.editedPath);
    },

    refreshFolder() {
      this.openFolder(this.folderCurrent.path);
    },
    createNewProject() {
      this.$router.push({
        name: "project-create",
        param: {
          path: this.editedPath,
        },
      });
    },
  },
  mounted() {
    this.resetCwd();
  },
};
</script>

<style lang="less" scoped>
.toolbar {
  padding: 16px 0;
  display: flex;

  .action {
    margin-left: 0px;
    padding: 0 8px;
    align-items: center;
    justify-items: center;
    display: flex;
    height: 100%;
    & svg {
      margin-top: 4px;
    }
  }

  .action + .action {
    margin-left: 4px;
  }

  .path-edit {
    flex: 100% 1 1;
    display: flex;
    align-items: center;
    margin: 0 4px;
    .action {
      margin-left: 2px;
      padding: 4px 8px;
    }
  }
}

.folder-explorer {
  display: flex;
  width: 700px;
  flex-direction: column;
  align-items: stretch;

  .folders {
    flex: 100% 1 1;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
  }
}
</style>
